<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html,body,div,input,ul,li,img{
				margin: 0;
				padding: 0;
				border: 0;
				box-sizing: border-box;
				outline: none;
			}
			.header_box,.mall_box,.footer_box{
				width: 100%;
				margin: 0 auto;
				font-size: 14px;
			}
			.header_box{
				height: 8vh;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				/* background-color: red; */
			}
			.mall_box{
				height: 80vh;
				/* background-color: antiquewhite; */
			}
			.footer_box{
				height: 12vh;
				/* background-color: burlywood; */
			}
			
			/* header */
			.h_box{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 2vw;
			}
			.input_box{
				width: 230px;
				height: 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #bbb;
				/* background-color: aqua; */
			}
			.input_box>input{
				padding-left: 8px;
				width: 200px;
				height: 100%;
			}
			.select_img{
				width: 124px;
				height: 24px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.select_img:hover{
				background-color: pink;
			}
			
			
			/* 主面板 */
			.m_box{
				padding-left: 2vw;
				padding-right: 2vw;
				min-width: 1000px;
			}
			.m_mall{
				height: 6vh;
				font-weight: 600;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #c7c7c7;
			}
			.m_mall_list{
				height: 6vh;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #bbb;
				/* background-color: #00FFFF; */
			}
			.m_mall_itme{
				width: 80px;
				text-align: center;
				/* background-color: darkgoldenrod; */
			}
			.m_operation,.m_operation_title{
				width: 100px;
				text-align: center;
				/* background-color: darkgoldenrod; */
			}
			.m_operation{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px 0 20px;
			}
			.m_operation_coloured{
				color: #0aa1eb;
			}
			.m_operation_coloured:hover{
				color: #02d5ff;
				cursor:pointer;
			}
			
			
			
			.m_mall_list_itm{
				height: 6vh;
				border-left: 5px solid #02D5FF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;
				/* background-color: #00FFFF; */
			}
		</style>
	</head>
	<body>
		<div id="" class="administration_page">
			<!-- header开始 -->
			<div class="header_box">
				<div class="h_box">
					<div  class="input_box">
						<input type="text"  @keyup.enter="select_click()" v-model="select_val"  placeholder="搜索粉客ID"/>
						<div class="select_img" @click="select_click()">搜索</div>
					</div>
				</div>
			</div>
			<!-- header结束 -->
			<!-- mall开始 -->
			<div class="mall_box">
				<!-- title行开始 -->
				<div class="m_box">
					<div class="m_mall">
						<div class="m_mall_itme">ID</div>
						<div class="m_mall_itme">用户名</div>
						<div class="m_mall_itme">等级</div>
						<div class="m_mall_itme">原始兑货券</div>
						<div class="m_mall_itme">团队人数</div>
						<div class="m_mall_itme">直推人数</div>
						<div class="m_mall_itme">总金额</div>
						<div class="m_mall_itme">推荐人</div>
						<div class="m_mall_itme">注册时间</div>
						<div class="m_operation_title">操作</div>
					</div>
				</div>
				<!-- title行结束 -->
				<!-- 内容区开始 -->
				<div class="m_box">
<!--					当前点击元素向后reslist_a个元素  左外边距+100px   m_lt-->
					<div class="m_mall_list" v-for="(item,index) in relation_information"
						 :key='index' :style="{color:(reslist_a==index ? 'red' : '#000')}">
<!--						<div class="m_mall_itme" :style="{{reslist_a==index ? m_lt : 0}}">{{item.UserId}}</div>-->
						<div class="m_mall_itme">{{item.UserId}}</div>
						<div class="m_mall_itme">{{item.user}}</div>
						<div class="m_mall_itme">{{item.level}}</div>
						<div class="m_mall_itme">{{item.speedIntegral}}</div>
						<div class="m_mall_itme">{{item.count}}</div>
						<div class="m_mall_itme">{{item.crowdordering}}</div>
						<div class="m_mall_itme">{{item.speedIntegral}}</div>
						<div class="m_mall_itme">{{item.userPareName}}</div>
						<div class="m_mall_itme">{{item.CretateTime}}</div>
						<div class="m_operation">
							<div class="m_operation_coloured" @click="query_junior($event,index)">下级</div>
							<div class="m_operation_coloured" @click="router_details($event)">查看</div>
						</div>
					</div>
				</div>
				<!-- 内容区结束 -->
			</div>
			<!-- mall结束 -->
			<!-- footer开始 -->
			<div class="footer_box">
				<div class="f_box">
				</div>
			</div>
			<!-- footer结束 -->
		</div>
	</body>
	<script src="/static/layui/layui.all.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			index();
		};
		function index(){
			var vm = new Vue({
				el: ".administration_page",
				//页面数据声明
				// 当前点击元素向后reslist_a个元素  左外边距+100px
				data: {
					vhtml_id:'',
					select_val:'',
					reslist_a:0,
					m_lt:0,//默认0
					rel_a:'',
					rel_aa:'',
					rel_b:'',
					ides:'',
					relation_information:[]//搜索用户展示的数据
				},
				
				//挂在完成后执行
				mounted: function(){
					this.creat_list();					
				},
				
				//页面函数声明
				methods: {
					// 点击搜索
					select_click:function(){
						var inputvalue=vm.select_val;
						$.ajax({
							type: 'get',
							url: "/system/recommended/OneQueryteam",
							data: {'id': inputvalue},
							dataType: 'json',
							success: function (res) {
								layer.msg("查询成功");
								// this.relation_information = res.data;//如果获取的是数组
								// vm.relation_information.push(res.data);
								if(res.data.UserId!=vm.rel_aa){
									vm.relation_information.push(res.data);
								};
								vm.rel_aa = res.data.UserId;
							},
							fail: function () {
								layer.msg("查询失败");
							}
						});
					},
					
					//查看下级
					query_junior:function(e,i){
						//DOM获取期父级的父级的第一个子元素的innerhtml;
						console.log('e====',e.currentTarget.parentElement.parentElement.firstChild.parentElement.firstChild.innerHTML);
						var es=e.currentTarget.parentElement.parentElement.firstChild.parentElement.firstChild.innerHTML
						console.log("i===",i)

						$.ajax({
							type: 'get',
							url: "/system/recommended/Queryteam",
							data: {'id': es},
							dataType: 'json',
							success: function (res) {
								layer.msg("查询成功");
								if(es!=vm.ides){
									vm.ides=es;
									let reslist=res.data;
									if (res.data.length>0) {
										//1.根据id查询获得数组   this.rel_b
										reslist.forEach((ite,k)=>{
											//遍历数组
											vm.relation_information.splice(i+1, 0, ite);
											console.log("插入元素的下标===",k+i+1);
											vm.reslist_a = k+i+1;
										})
									} else{
										alert('未查询到此id的下级关联用户')
									}
								}else{
									console.log("77777")
								}
							}, fail: function () {
								layer.msg("查询失败");
							}
						});
					},
					
					//跳转页面
					router_details:function(e){
						var ces=e.currentTarget.parentElement.parentElement.firstChild.innerHTML;
						console.log(ces);
						//存入缓存到对应地址
						document.cookie="id="+ces;
						//跳转
						window.location.href='http://127.0.0.1:808/system/index?go=/system/recommended/details';

					},
			  }
			});
		}
	</script>
</html>